/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/Footer/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

import { t } from '@src/locales'

export type FooterProps = {
  
}

export interface FooterSetupState {
  
}

export enum FooterEmitEventNameEnum {
  Input = 'input',
  Close = 'close',
  Confirm = 'confirm'
}

export type FooterInstance = ComponentInstance & FooterSetupState
export type FooterVM = ComponentRenderProxy<FooterProps> & CommonComponentInstance & FooterInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserFooter,
  props: {
    onInput: {
      type: Function
    },
    onClose: {
      type: Function
    },
    onConfirm: {
      type: Function
    }
  },
  emits: [
    FooterEmitEventNameEnum.Input,
    FooterEmitEventNameEnum.Close,
    FooterEmitEventNameEnum.Confirm
  ],
  setup(props: FooterProps, { emit }) {
    
    const close = () => {
      emit(FooterEmitEventNameEnum.Close)
    }
    
    const confirm = () => {
      emit(FooterEmitEventNameEnum.Confirm)
    }
    
    return {
      close,
      confirm
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserFooter}>
        <el-button
          type="ghost" 
          class="base-select-user-contact-cancel" 
          onClick={this.close}
        >
          {t('common.base.cancel')}
        </el-button>
        <el-button 
          type="primary" 
          class="base-select-user-contact-choose" 
          onClick={this.confirm}
        >
          {t('common.base.confirm')}
        </el-button>
      </div>
    )
  }
})
